<template>
    <div class="home">
        <div class="movie" v-for="item of movies" :key="item.pic">
            <img class="pic" :src="item.pic">
            <div>
                <p class="title">{{item.title}}</p>
                <div class="pf">
                    <span class="rating">{{item.rating}}</span>
                    <div class="star" v-for="(value,index) of handleStar(item.rating)" :key="index">
                        <img v-if="value>1.5" src="../../assets/star.png">
                        <img v-else-if="value>1" src="../../assets/ban-star.png">
                        <img v-else src="../../assets/none-star.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name:"App",
    data(){
        return {
        movies:[]
        }
    },
    mounted(){
        let url = "http://47.108.197.28:4000/api/movie/comingSoon";
        axios.get(url).then(res=>{
        this.movies = res.data.res;
        })
    },
    methods:{
        handleClick(value){
            console.log(value)
            this.$router.push(`/moviedetail?id=${value}`)
        },
        handleStar(ele){
        var arr=[];
        for(let i=0;i<5;i++){
            if(ele>=2){
            arr.push(2)
            }else if(ele>=0){
            arr.push(Number(ele.toFixed(1)))
            }else{
            arr.push(0)
            }
            ele = ele - 2;
        }
        return arr
        }
    }
}
</script>
<style  scoped>
.movie{
    display: flex;
    margin: 30px;
}
.pic{
    width: 70px;
    height: 90px;
}
.star img{
    widows: 20px;
    height: 20px;
}
.pf{
display: flex;}
</style>